<template>
  <div class="container">
    <floor v-if="floorItem.parent" :floorItem="floorItem.parent" :parentLength="parentLength - 1" @reply="reply"/>
    <div class="commentFollow">
      <div class="user-comment">
        <div class="center">
          <span>{{floorItem.user.nickname}}</span>
          <i>2小时前</i>
        </div>
        <input @click="reply" type="button" value="回复">
      </div>
      <div class="floor"></div>
      <div class="user-content">
        <i class="font-id">{{parentLength}}</i>: {{floorItem.content}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'floor',
  data() {
    return {
    }
  },
  props: ['floorItem', 'parentLength'],
  methods: {
    reply(data) {
      if(data.id){
        this.$emit('reply', data)
      }else{
        this.$emit('reply', this.floorItem.id)
      }
    }
  }
}
</script>

<style scoped lang="less">
.commentFollow {
  padding: 4vw 3vw;
  border: 1px solid #f0f0f0;
  background: #f8f8f8;
  // border-bottom: none;
  .user-comment {
    display: flex;
    justify-content: space-between;
    // flex-direction: column;
    align-items: center;
    .center {
      flex: 1;
      line-height: 9vw;
      span {
        font-size: 4.5vw;
        padding-right: 4vw;
      }
      i {
        font-size: 3.8vw;
        color: #adadad;
      }
    }
    input {
      border: none;
      outline: none;
      background: #d8d8d8;
      padding: 1.5vw 1.5vw;
      border-radius: 1vw;
      color: #8a8a8a;
    }
  }
  .user-content {
    margin-top: 3vw;
    .font-id {
      font-size: 5vw;
      font-weight: 700;
      padding-right: 1vw;
    }
  }
}
</style>
